<template>
  <div class="concent">
    <div id="cartTable">
      <div class="cart-table-th">
        <div class="wp">
          <div class="th th-chk">
            <div id="J_SelectAll1" class="select-all J_SelectAll">

            </div>
          </div>
          <div class="th th-item">
            <div class="td-inner">商品信息</div>
          </div>
          <div class="th th-price">
            <div class="td-inner">单价</div>
          </div>
          <div class="th th-amount">
            <div class="td-inner">数量</div>
          </div>
          <div class="th th-sum">
            <div class="td-inner">金额</div>
          </div>
          <div class="th th-op">
            <div class="td-inner">操作</div>
          </div>
        </div>
      </div>
      <div class="clear"></div>

        <div class="bundle  bundle-last ">
          <!--<div class="bundle-hd">
            <div class="bd-promos">
              <div class="bd-has-promo">已享优惠:<span class="bd-has-promo-content">省￥19.50</span>&nbsp;&nbsp;</div>
              <div class="act-promo">
                <a href="#" target="_blank">第二支半价，第三支免费<span class="gt">&gt;&gt;</span></a>
              </div>
              <span class="list-change theme-login">编辑</span>
            </div>
          </div>
          <div class="clear"></div>-->
          <div class="bundle-main">
            <ul class="item-content clearfix" v-for="(item, index) in items">
              <li class="td td-chk">
                <div class="cart-checkbox ">
                  <input class="check" :id="item.id" name="selectItems" value="170037950254" type="checkbox">
                  <label :for="item.id"></label>
                </div>
              </li>
              <li class="td td-item">
                <div class="item-pic">
                  <a :href="item.itemUrl" target="_blank" class="J_MakePoint" data-point="tbcart.8.12">
                    <img :src="item.pic" class="itempic J_ItemImg"></a>
                </div>
                <div class="item-info">
                  <div class="item-basic-info">
                    <a :href="item.itemUrl" target="_blank" :title="item.title" class="item-title J_MakePoint" data-point="tbcart.8.11">
                      {{item.title}}
                    </a>
                  </div>
                </div>
              </li>
              <li class="td td-info">
                <div class="item-props item-props-can">
                  <span class="sku-line" v-for="(spec, index) in item.specs">{{spec.name}}：{{spec.value}}</span>
                  <span tabindex="0" class="btn-edit-sku theme-login">修改</span>
                  <i class="theme-login am-icon-sort-desc"></i>
                </div>
              </li>
              <li class="td td-price">
                <div class="item-price price-promo-promo">
                  <div class="price-content">
                    <!--<div class="price-line">
                      <em class="price-original">{{item.price}}</em>
                    </div>-->
                    <div class="price-line">
                      <em class="J_Price price-now" tabindex="0">{{item.price}}</em>
                    </div>
                  </div>
                </div>
              </li>
              <li class="td td-amount">
                <div class="amount-wrapper ">
                  <div class="item-amount ">
                    <div class="sl">
                      <input class="min am-btn" name="" type="button" value="-">
                      <input class="text_box" name="" type="text" :value="item.count" style="width:30px;">
                      <input class="add am-btn" name="" type="button" value="+">
                    </div>
                  </div>
                </div>
              </li>
              <li class="td td-sum">
                <div class="td-inner">
                  <em tabindex="0" class="J_ItemSum number">{{item.amount}}</em>
                </div>
              </li>
              <li class="td td-op">
                <div class="td-inner">
                  <a title="移入收藏夹" class="btn-fav" href="javascript:;" @click="moveToFavorite(item.id)">
                    移入收藏夹
                  </a>
                  <a href="javascript:;" data-point-url="#" class="deelet" @click="deleteCartItem(item.id)">
                    删除
                  </a>
                </div>
              </li>
            </ul>

          </div>
        </div>
    </div>

    <div class="clear"></div>

    <div class="float-bar-wrapper">
      <div id="J_SelectAll2" class="select-all J_SelectAll">
        <div class="cart-checkbox">
          <input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
          <label for="J_SelectAllCbx2"></label>
        </div>
        <span>全选</span>
      </div>
      <!--<div class="operations">
        <a href="#" hidefocus="true" class="deleteAll">删除</a>
        <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
      </div>-->
      <div class="float-bar-right">
        <div class="amount-sum">
          <span class="txt">已选商品</span>
          <em id="J_SelectedItemsCount">0</em><span class="txt">件</span>
          <div class="arrow-box">
            <span class="selected-items-arrow"></span>
            <span class="arrow"></span>
          </div>
        </div>
        <div class="price-sum">
          <span class="txt">合计:</span>
          <strong class="price">¥<em id="J_Total">0.00</em></strong>
        </div>
        <div class="btn-area">
          <a href="javascript:;" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算" @click="settle">
            <span>结&nbsp;算</span></a>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: 'CartList',
  data () {
    return {
      items: [
        {
          id: 10,
          pic: 'static/images/kouhong.jpg_80x80.jpg',
          itemUrl: `item.html?itemId=1`,
          title: '美康粉黛醉美唇膏 持久保湿滋润防水不掉色',
          specs: [
            { name: '颜色', value: '12#川南玛瑙' },
            { name: '包装', value: '裸妆' }
          ],
          price: 39.00,
          count: 3,
          amount: 117.00
        }
      ]
    }
  },
  methods: {
    moveToFavorite (itemId) {
      console.log(`// TODO 将商品${itemId}移入收藏夹`)
    },
    deleteCartItem (itemId) {
      console.log(`// TODO 删除购物车项${itemId}`)
    },
    settle () {
      // 1. make sure has item selected
      // 2. post select_item to server
      // 3. redirect pay.html
    }
  }
}
</script>
